th.no-header {
    color: transparent;
}

#materialsTable {
    width: 100%;
}

#form > div > section {
    border: none;
    box-shadow: none;
    background: transparent;

}

.right {
    text-align: right;
}

.button-invisible {
    opacity: 0;
    transition: all 0.4s ease;
    pointer-events: none;
    cursor: default;
}

.button-visible {
    opacity: 1;
    transition: all 0.4s ease;
    cursor: pointer;
}

.button-visible,
.button-invisible {
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
}


/* Hidden panel for the Add form */
#addMaterialPanel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}

/* When visible */
#addMaterialPanel.visible {
  max-height: 500px; /* or auto with JS assist */
  opacity: 1;
}

.materials-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0rem;
    align-items: flex-start;
}

.material-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
    text-align: center;
    font-size: 1.1em;
}

.material-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 0.25rem;
}

.course-header {
    font-size: 1.6em;
    margin: 0.5em;
}

.courseMaterials-header {
    font-size: 1.4em;
    margin: 0.2em;
}

.classes {
  font-size: 1.4em;
  margin: 0.5em;
  margin-bottom: 1.6em;
}


table:has(td p.course-header) thead {
  display: none;
}

table:has(td p.course-header) {
  margin-bottom: 2em;
}

table:has(td p.course-header) tr:hover {
  background-color: transparent !important;
}

tr:has(td p.course-header) td {
  background-color: #e7e9ee;
}

tr:has(td p.courseMaterials-header) td {
  background-color: #f3f4f6;
}

.material-item:hover {
  background-color: #f0f4fa;
  color: #0056b3;
}

.material-item .material-icon svg {
  fill: currentColor;
  transition: fill 0.2s ease;
}

/* Experimental */